<template>
	<div class="myNum">
		<Header :title="title"/>
		<div class="numcontent">
			<div class="con">
				<div class="contentLeft">微信头像</div>
				<div class="contentRight">
					<div>张丽</div>
					<div>187*****1122</div>
				</div>
			</div>
		</div>
		<div class="tops">
			<numInput :numtitle="numtitle" :numinfor="numinfor"/>
			<numInput :numtitle="numtitleo" :numinfor="numinforo"/>
			<numInput :numtitle="numtitlet" :numinfor="numinfort"/>
			<numInput :numtitle="numtitlef" :numinfor="numinforf"/>
			<Button :btitle="btitle"/>
		</div>
	</div>
</template>

<script>
	import numInput from '../components/numInput.vue'
	import Header from '../components/Header.vue'
	import Button from '../components/button.vue'
	export default{
		data(){
			return {
				title:'我的账户',
				numtitle:'登录手机号',
				numtitleo:'修改登录密码',
				numtitlet:'微信授权绑定',
				numtitlef:'实名认证',
				numinfor:'187*****1122',
				numinforo:'',
				numinfort:'已授权',
				numinforf:'已认证',
				btitle:'退出登录'	
			}
		},
		components:{
			numInput,
			Header,
			Button
		}
	}
</script>

<style>
	.myNum{
		width: 100%;
		height: 100vh;
		background: #F5F5F5;
	}
	.tops{
		margin-top: 30px;
	}
	.numcontent{
		width: 100%;
		height: 110px;
		background: #fff;
		font-size: 14px;
		border-top:1px solid #fff;
	}
	.con{
		width: 300px;
		height: 60px;
		margin-top: 25px;
		margin-left: 18px;
	}
	.contentLeft{
		width: 60px;
		height: 60px;
		background: #333333;
		text-align: center;
		line-height: 60px;
		border-radius: 50%;
		float: left;
		color:#fff;
	}
	.contentRight{
		float: left;
		height: 60px;
		margin-top: 5px;
		margin-left: 10px;
		line-height: 25px;
	}
</style>
